<template>
<div class="app">
  <div class="item">
    <span>头像设置</span>
    <UploadProfile/>
  </div>
  <div class="item">
    <span>账号</span>
    <div class="setNickName">
      <el-input placeholder="请输入内容" v-model="getUser.userName" disabled>
        <el-button slot="append" disabled>修改</el-button>
      </el-input>
    </div>
  </div>
  <div class="item">
    <span>昵称</span>
    <div class="setNickName">
        <el-input placeholder="请输入内容" v-model="nickName">
          <el-button type="danger" slot="append" @click="update">修改</el-button>
        </el-input>
    </div>
  </div>
  <div class="item">
    <span>密码设置</span>
    <UploadPasswordComponent/>
  </div>
</div>
</template>

<script>
import UploadProfile from "@/components/option/info/upload/UploadProfile";
import HobbyComponent from "@/components/content/HobbyComponent";
import UploadPasswordComponent from "@/components/option/info/password/UploadPasswordComponent";
import {updateUser} from "@/utils/api";

export default {
  name: "EditUserComponent",
  components: {UploadPasswordComponent, HobbyComponent, UploadProfile},
  props: {},
  data() {
    return {

    }
  }, methods: {
    async update(){
      // console.log(this.user)
      const user = this.getUser;
      updateUser(
          user
      ).then(res=>{
        if(res.code === 200){
          this.$notify.success("提交成功")
          // console.log(res)

          this.Logout()
        }else{
          this.$notify.error("提交失败")
          // console.error(res)
        }
      })
    },
  }, watch: {}, computed: {
    getUser:{
      get(){
        return this.$store.getters.getUser;
      },
      set(value){
        return this.$store.commit("setUser",value);
      }
    },
    nickName:{
      get(){
        return this.$store.getters.getUser.nickName;
      },
      set(value){
        var user = this.getUser
        user.nickName = value
        return this.$store.commit("setUser",user);
      }
    }
  },mounted() {
  }
}
</script>

<style scoped>
.app{
  /*border-radius: 20px;*/
  /*background-color: rgb(234, 227, 227)!important;*/
  text-align: center;
}
.app .item{
  display: flex;
  line-height: 100px;
  justify-content: center;
}
.item span {
  width: 180px;
  margin-right: 100px;
}
.setNickName{
  width: 500px;
}
</style>